import React, { createContext, useContext, useEffect, useRef } from 'react';
import './app.component.css';
import { InnerMqService } from "./rx/service/inner-mq.service";
import IndexComponent from "./view/index/index.component";
import MainComponent from "./view/main/main.component";
import { InnerMqClient } from "./rx/client/inner-mq.client";
import { Topic } from "./rx/topic";

const innerMqService = new InnerMqService();

export const GLOBAL = createContext<{ innerMqService: InnerMqService }>({
	innerMqService: innerMqService,
});

const AppComponent: React.FC = () => {

	const client = useRef<InnerMqClient>();

	useEffect(() => {
		client.current = innerMqService.createClient();
		client.current.sub(Topic.MY_TP_1, (res) => {
			console.log(res);
		});
		return () => {
			client.current && innerMqService.destroyClient(client.current);
		};
	}, []);

	return (
		<GLOBAL.Provider value={{ innerMqService: innerMqService }}>
			<div className="container-app">
				<div className="name-app">
					app component
				</div>
				<div className="comp-index">
					<IndexComponent></IndexComponent>
				</div>
				<div className="comp-main">
					<MainComponent></MainComponent>
				</div>
			</div>
		</GLOBAL.Provider>
	);
}

export default AppComponent;
